<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>侧边栏</title>
		<style>
			body {
				font-family: "Lato", sans-serif;
			}

			.sidenav {
				height: 61%;
				width: 250px;
				position: fixed;
				z-index: 1;
				background-color: #ffffffd9;
				overflow-x: hidden;
				transition: 0.5s;
				text-align: center;
				border-radius: 15px;
				box-shadow: 1px 1px 5px #303133;
				padding: 39px 15px 15px;
				margin-top: 74px;
			}

			.sidenav::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 120px;
				background: url(https://cdn-ali-img-shstaticbz.shanhutech.cn/bizhi/staticwp/202110/9da80970396542f9ffaf13ddd01f5067--304154848.jpg) no-repeat;
				background-size: cover;
			}

			.sidenav .user {
				position: relative;
				z-index: 111;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 20px;
				top: -10px;
			}

			.sidenav .user img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				margin-bottom: 10px;
				user-select: none;
				background: #ffffffd9;
				padding: 5px;
				transition: transform 0.75s, -webkit-transform 0.75s;
			}

			.sidenav .user a {
				color: #303133;
				margin-bottom: 10px;
				font-size: 16px;
				font-weight: 500;
				text-decoration: none;
			}

			.dengji {
				color: #fff;
				background: #000000;
				font-size: 10px;
				display: inline-block;
				vertical-align: text-bottom;
				font-weight: normal;
				border-radius: 2px;
				line-height: 1.6;
				padding: 0 4px;
				margin-left: 5px;
				letter-spacing: 0px;
			}

			.sidenav .webinfo {
				width: 100%;
				padding-bottom: 20px;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ebeef5;
			}

			.sidenav .webinfo .item:first-child {
				border-right: 1px solid #ebeef5;
			}

			.sidenav .webinfo .item {
				width: 0;
				min-width: 0;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 12px;
			}

			.sidenav .webinfo .item .num {
				max-width: 70px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500;
				font-size: 22px;
				color: #303133;
				margin-bottom: 3px;
			}

			.sidenav .articles {
				width: 100%;
				overflow: hidden;
				padding: 0;
				margin-top: 15px;
			}

			.sidenav .articles li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 32px;
			}

			.sidenav .articles li a {
				color: #303133;
				max-width: 85%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-decoration: none;
			}

			.sidenav .articles li svg {
				width: 16px;
				height: 16px;
			}

			.sidenav .closebtn {
				position: absolute;
				top: 0;
				right: 25px;
				font-size: 36px;
				margin-left: 50px;
				color: #EBEEF5;
				text-decoration: none;
			}

			@media screen and (max-height: 450px) {
				.sidenav {
					padding-top: 15px;
				}

				.sidenav a {
					font-size: 18px;
				}
			}
		</style>
	</head>
	<body>
		<div id="mySidenav" class="sidenav" style="left: -650px;">
			<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
			<div class="user">
				<img src="https://thirdqq.qlogo.cn/g?b=qq&nk=434871910&s=100" />
				<a href="https://www.yangjie.site/">小杰<span class="dengji">站长</span></a>
				<!--访问量-->
				<div style="border-radius: 3px;color: #fff;padding: 5px;background: #000000;font-size: 14px;">小杰导航 4.4.4 </div>
			</div>
			<div class="webinfo">
				<div class="item" title="XXXXX">
					<span class="num">xxx</span>
					<span>XXX</span>
				</div>
				<div class="item" title="XXXXX">
					<span class="num">xxx</span>
					<span>XXX</span>
				</div>
			</div>
			<ul class="articles">
				<li title="">
					<a href="">xxx</a>
					<svg t="1599802830077" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg">
						<path
							d="M448.12 320.331a30.118 30.118 0 0 1-42.616-42.586L552.568 130.68a213.685 213.685 0 0 1 302.2 0l38.552 38.551a213.685 213.685 0 0 1 0 302.2L746.255 618.497a30.118 30.118 0 0 1-42.586-42.616l147.034-147.035a153.45 153.45 0 0 0 0-217.028l-38.55-38.55a153.45 153.45 0 0 0-216.998 0L448.12 320.33zM575.88 703.67a30.118 30.118 0 0 1 42.616 42.586L471.432 893.32a213.685 213.685 0 0 1-302.2 0l-38.552-38.551a213.685 213.685 0 0 1 0-302.2l147.065-147.065a30.118 30.118 0 0 1 42.586 42.616L173.297 595.125a153.45 153.45 0 0 0 0 217.027l38.55 38.551a153.45 153.45 0 0 0 216.998 0L575.88 703.64z m-234.256-63.88L639.79 341.624a30.118 30.118 0 0 1 42.587 42.587L384.21 682.376a30.118 30.118 0 0 1-42.587-42.587z"
							p-id="7351"></path>
					</svg>
				</li>
			</ul>
		</div>
		<h2>全屏幕侧边栏</h2>
		<p>点击以下菜单图标打开侧边栏</p>
		<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 打开</span>
	</body>
	<script>
		function openNav() {
			document.getElementById("mySidenav").style.left = "10px";
		}

		function closeNav() {
			document.getElementById("mySidenav").style.left = "-650px";
		}
	</script>
</html>
